<template>
<div class="content">
    <span style="float: left;position: relative;top: 0.3125rem;">筛选查询</span>
    <div class="top">
      <span>项目</span>
      <el-select size="small" v-model="option.projectName" clearable  placeholder="全部">
        <el-option v-for="item in options.projectName" :key="item.projectName" :label="item.projectName" :value="item.projectName">
        </el-option>
      </el-select>
    </div>
    <div class="top">
      <span>登记时间</span>
      <el-date-picker size="small" v-model="option.defectCreattime" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="top_button">
      <el-button @click="flush()" size="small">刷新</el-button>
      <el-button type="primary" name="but-insert" id="but-insert" @click="selectProption(options)" size="small">搜索

      </el-button>
  <el-button type="danger" name="but-delete" id="but-delete" @click="exportTo()" size="small">导出</el-button>
     <!-- <el-button type="danger" size="small"><a href="http://localhost:8888/StatisticAlanalysis/exportDefectType" >导出</a></el-button> -->
    </div>

    <div id="main" style="height: 1500px;width: 1500px;">

        <el-table
            :data="Proption"
               id="out-table"
            style="width: 100%;height: 100%;">
            <el-table-column
              prop="projectName"
              label="项目名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="workhoursCreatename"
              label="登记人姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="workhoursRegistertime"
              label="登记时间">
            </el-table-column>
            <el-table-column
              prop="workhoursNum"
              label="登记工时">
            </el-table-column>

          </el-table>

    </div>


    </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
  export default{
    name:'Workhourday',


    data() {
      return {

        options: {
           value1: [],
          projectName:[]
        },
        option:{
          defectCreattime: [],
          projectName:''
        },
        Proption: [],


      }
    },

    methods: {
      //刷新整个页面
      flush(){
          location.reload()
         },

            findAllprojectname() {
              this.$axios.post("/project/getAllProjectName").then(resp => {
                this.options.projectName = resp.data.data

              })
            },
            selectProption() {

              JSON.stringify(this.option)
              console.log(111)
              console.log(this.option)
              this.$axios.post("/StatisticAlanalysis/SelectWorkhourday", this.option).then(resp => {
                console.log(resp)

                this.Proption=resp.data.data
   
              })
            },
            exportTo(){
               /* 从表生成工作簿对象 */

                      let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
                      /* 获取二进制字符串作为输出 */
                      var wbout = XLSX.write(wb, {
                          bookType: 'xlsx',
                          bookSST: true,
                          type: 'array'
                      })
                      try {
                          FileSaver.saveAs(
                          //Blob 对象表示一个不可变、原始数据的类文件对象。
                          //Blob 表示的不一定是JavaScript原生格式的数据。
                          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                          new Blob([wbout], { type: 'application/octet-stream' }),
                          //设置导出文件名称
                          '登记日报.xlsx'
                          )
                      } catch (e) {
                          if (typeof console !== 'undefined') console.log(e, wbout)
                      }
                      return wbout

            }


    },
    created() {
      this.findAllprojectname()
      this.selectProption()

  }
}

</script>

<style>
  .top {
    position: relative;
    float: left;
    left: 3%;
    /* margin-left: 1.25rem; */
  }

  .time {
    text-align: left;
  }

  .top_button {
    position: relative;
    float: right;
    right: 3%;
  }
  #main{
    position: relative;
    top: 100px;
  }
</style>
